<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 450px;
            height: 350px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">

        <!-- 代表这个事件只能由它自身触发，不能由冒泡触发 -->
        <div class="box" @click.self="fatherFn">
            <!-- 阻止默认行为 -->
            <a @click.prevent="fn1" href="http://www.itcast.cn">我是a连接</a>
            <!-- 阻止冒泡 -->
            <button @click.stop="fn2">点我</button>

            <!-- 我既想阻止默认行为，又想阻止冒泡 -->
            <!-- 他们之间没有顺序之分，只要写上了就是有对应的效果 -->
            <a @click.stop.prevent="fn1" href="http://www.itcast.cn">我是a连接</a>

            <!-- 绑定的事件只会触发一次 -->
            <!-- once让事件只有一次，但是事件冒泡是默认存在的 -->
            <!-- once代表这个事件绑定只绑定了一次，那么后面再点会连同stop也没了 -->
            <button @click.stop.once="fn3">点我啊2</button>

            <button @click="fn2">点我3</button>
            <button @click="fn2">点我4</button>
            <button @click="fn2">点我5</button>
        </div>

        <!-- 
            事件冒泡默认就存在
                它指的是一个元素的事件触发后会一级一级往上调用所有父级元素的同名事件

            例:一个 父盒子有点击事件，子盒子也有点击事件

            所以此时 子盒子点击事件触发后，父盒子也会自动触发点击事件

            如果万一 爷爷盒子也有点击事件，那子盒子点击事件触发后，除了调用父盒子的
            也会调用爷爷盒子的

            如果对子盒子阻止冒泡，那么子盒子点击后，就只触发子盒子自己的事件，这就叫阻止冒泡
        
         -->
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            methods: {
                fatherFn () {
                    alert('父盒子被点了')
                },
                fn1 () {
                    alert(123)
                },
                fn2 () {
                    alert('按钮被点了')
                },
                fn3 () {
                    alert('fn3被点了')
                }
            }
        })
    </script>
</body>
</html>